<template>
	<view>
		<!-- 模糊背景 -->
		<view class="topic-bg">
			<image :src="topicInfo.titlepic" mode="aspectFill" lazy-load></image>
		</view>
		<!-- 话题信息 -->
		<view class="topic-info">
			<view class="topic-info-t uni-flex" >
				<image :src="topicInfo.titlepic" mode="widthFix" lazy-load></image>
				<view class="">#{{topicInfo.title}}#</view>
			</view>
			<view class="topic-info-c uni-flex">
				<view class="">动态 {{topicInfo.totalnum}}</view>
				<view class="">今日 {{topicInfo.todaynum}}</view>
			</view>
			<view class="topic-info-b">
				{{topicInfo.desc}}
			</view>
		</view>
		<!-- tabbar切换 -->
		<swiper-tab-head :tabBars="tabBars" :tabindex="tabindex" @tabtap="tabtap" 
		 scrollItemStyle="width:50%;" scrollStyle="border-bottom:0;">
		</swiper-tab-head>
		<!-- 列表 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabindex" @change="tabChange">
				<!-- 关注 -->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="loadmore()">
							<view class="abc" v-for="(item,index) in moren.list" :key="index" >
								<view class="common-list animated fadeInLeft faster" >
									<view class="common-list-l">
										<image :src="item.userpic" mode="widthFix" lazy-load></image>
									</view>
									<view class="common-list-r">
										<view class="list-one">
											<view class="uni-flex">{{item.username}}
											<view class="icon iconfont  tag-sex" :class="[item.sex==0?'icon-nan':'icon-nv']">{{item.age}}</view></view>
											<view class="icon iconfont icon-zengjia" v-show="!item.isguanzhu" @tap="guanzu">关注</view>
										</view>
										<view class="list-two">{{item.title}}</view>
										<view class="list-three uni-flex">
											
											<image :src="item.titlepic" mode="widthFix" lazy-load v-if="item.titlepic"></image>
											
											<template v-if="item.video">
												<view class="common-list-play icon iconfont icon-bofang">
												</view>
												<view class="common-list-playinfo">
													{{item.video.looknum}} 次播放 {{item.video.long}}
												</view>
											</template>
											
											<view class="common-list-share" v-if="item.share">
												<image :src="item.share.titlepic" mode="widthFix" lazy-load></image>
												<view class="">{{item.share.title}}</view>
											</view>
										</view>
										<view class="list-four">
											<view class="">
												{{item.path}}
											</view>
											<view class="uni-flex font">
												<view class="icon iconfont icon-zhuanfa">{{item.sharenum}}</view>
												<view class="icon iconfont icon-pinglun1">{{item.commentnum}}</view>
												<view class="icon iconfont icon-dianzan1">{{item.goodnum}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 上拉加载更多 -->
							<load-more :loadtext="moren.loadtext"></load-more>
							
					</scroll-view>
				</swiper-item>
				<!-- 最新 -->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="loadmore()">
							<view class="abc" v-for="(item,index) in zuixin.list" :key="index" >
								<view class="common-list animated fadeInLeft faster" >
									<view class="common-list-l">
										<image :src="item.userpic" mode="widthFix" lazy-load></image>
									</view>
									<view class="common-list-r">
										<view class="list-one">
											<view class="uni-flex">{{item.username}}
											<view class="icon iconfont  tag-sex" :class="[item.sex==0?'icon-nan':'icon-nv']">{{item.age}}</view></view>
											<view class="icon iconfont icon-zengjia" v-show="!item.isguanzhu" @tap="guanzu1">关注</view>
										</view>
										<view class="list-two">{{item.title}}</view>
										<view class="list-three uni-flex">
											
											<image :src="item.titlepic" mode="widthFix" lazy-load v-if="item.titlepic"></image>
											
											<template v-if="item.video">
												<view class="common-list-play icon iconfont icon-bofang">
												</view>
												<view class="common-list-playinfo">
													{{item.video.looknum}} 次播放 {{item.video.long}}
												</view>
											</template>
											
											<view class="common-list-share" v-if="item.share">
												<image :src="item.share.titlepic" mode="widthFix" lazy-load></image>
												<view class="">{{item.share.title}}</view>
											</view>
										</view>
										<view class="list-four">
											<view class="">
												{{item.path}}
											</view>
											<view class="uni-flex font">
												<view class="icon iconfont icon-zhuanfa">{{item.sharenum}}</view>
												<view class="icon iconfont icon-pinglun1">{{item.commentnum}}</view>
												<view class="icon iconfont icon-dianzan1">{{item.goodnum}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 上拉加载更多 -->
							<load-more :loadtext="zuixin.loadtext"></load-more>
							
					</scroll-view>
				</swiper-item>
		
			</swiper>
		</view>
		
		
		
	</view>
</template>

<script>
	import swiperTabHead from "../../components/index/swiper-tab-head.vue";
	import loadMore from "../../components/common/load-more.vue";
	
	export default {
		components:{
			swiperTabHead,
			loadMore
		},
		data() {
			return {
				swiperheight: 700,
				topicInfo:{ 
					titlepic:"../../static/demo/topicpic/13.jpeg",
					title:"忆往事，敬余生",
					desc:"我的是话题描述",
					totalnum:66,
					todaynum:55
				},
				tabindex:0,
				tabBars: [
					{name: "默认",id: "moren"},
					{name: "最新",id: "zuixin"}
				],
				moren:{
					loadtext:"上拉加载更多",
					list:[
						// 文字
						{
						userpic:"../../static/demo/userpic/8.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titlepic:"",
						video:false,
						share:false,
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						},
						// 图文
						{
						userpic:"../../static/demo/userpic/8.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titlepic:"../../static/demo/datapic/6.jpg",
						video:false,
						share:false,
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						},
						// 视频
						{
						userpic:"../../static/demo/userpic/8.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titlepic:"../../static/demo/datapic/6.jpg",
						video:{
							looknum:"20w",
							long:"2:47"
						},
						share:false,
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						},
						// 分享
						{
						userpic:"../../static/demo/userpic/8.jpg",
						username:"帅宝",
						sex:1,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titleoic:"",
						video:false,
						share:{
							title:"我是分享标题",
							titlepic:"../../static/demo/datapic/6.jpg"
						},
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						}
					]
				},
				zuixin:{
					loadtext:"上拉加载更多",
					list:[
						// 文字
						{
						userpic:"../../static/demo/userpic/10.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titlepic:"",
						video:false,
						share:false,
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						},
						// 图文
						{
						userpic:"../../static/demo/userpic/10.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titlepic:"../../static/demo/datapic/9.jpg",
						video:false,
						share:false,
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						},
						// 视频
						{
						userpic:"../../static/demo/userpic/10.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titlepic:"../../static/demo/datapic/9.jpg",
						video:{
							looknum:"20w",
							long:"2:47"
						},
						share:false,
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						},
						// 分享
						{
						userpic:"../../static/demo/userpic/10.jpg",
						username:"帅宝",
						sex:1,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titleoic:"",
						video:false,
						share:{
							title:"我是分享标题",
							titlepic:"../../static/demo/datapic/9.jpg"
						},
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						}
					]
				},
				
				
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					this.swiperheight = height;
				}
			});
		
		},
		// 监听下拉刷新（2秒关闭）
		onPullDownRefresh(){
			this.getdata()
		},
		methods: {
			// 上拉刷新
			getdata(){

				// 关闭下拉刷新
				setTimeout( ()=> {
					// 获取模拟数据
					let arr=[
						// 文字
						{
						userpic:"../../static/demo/userpic/2.jpg",
						username:"xxl",
						sex:0,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"哈哈哈哈哈哈哈哈",
						titlepic:"",
						video:false,
						share:false,
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						},
						// 图文
						{
						userpic:"../../static/demo/userpic/3.jpg",
						username:"xxl",
						sex:1,//0是男，1是女
						age:23,
						isguanzhu:false,
						title:"哈哈哈哈哈哈哈哈",
						titlepic:"../../static/demo/datapic/5.jpg",
						video:false,
						share:false,
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						},
						// 视频
						{
						userpic:"../../static/demo/userpic/2.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titlepic:"../../static/demo/datapic/3.jpg",
						video:{
							looknum:"20w",
							long:"2:47"
						},
						share:false,
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						},
						// 分享
						{
						userpic:"../../static/demo/userpic/2.jpg",
						username:"帅宝",
						sex:1,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titleoic:"",
						video:false,
						share:{
							title:"我是分享标题",
							titlepic:"../../static/demo/datapic/5.jpg"
						},
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						}
					];
					// 赋值
					this.moren.list=arr;
				            uni.stopPullDownRefresh();
				    }, 2000);
				    
			},
			// 点击事件：获取到点击tab内容的tabindex值，达到内容的切换
			tabtap(index) {
				this.tabindex = index;
			},
			// 滑动事件：获取到滑动是内容的tabindex值  从而下划线有滑动效果
			tabChange(e) {
				this.tabindex = e.detail.current;
			},
			guanzu(){
				this.moren.list.isguanzhu=true;
				uni.showToast({
				    title: '已关注'
				});
			},
			guanzu1(){
				this.zuixin.list.isguanzhu=true;
				uni.showToast({
				    title: '已关注'
				});
			},
			loadmore(){
				if (this.moren.loadtext!="上拉加载更多") {
					return;
				} 
				if (this.zuixin.loadtext!="上拉加载更多") {
					return;
				} 
				// 修改状态（加载状态）
				this.moren.loadtext="加载中....";
				this.zuixin.loadtext="加载中...."
				// 获取数据
				setTimeout(()=> {
					// 获取完成状态
					// 一条模拟数据
					let obj={
						userpic:"../../static/demo/userpic/12.jpg",
						username:"小宝",
						sex:1,//0是男，1是女
						age:16,
						isguanzhu:true,
						title:"我是标题",
						titlepic:"../../static/demo/datapic/10.jpg",
						video:false,
						share:false,
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						};
					this.moren.list.push(obj);
					this.moren.loadtext="上拉加载更多";
					this.zuixin.list.push(obj);
					this.zuixin.loadtext="上拉加载更多";
				}, 1000);
				// this.moren.loadtext="到底了"
				// this.zuixin.loadtext="到底了"
			},
			
			
		}
	}
</script>

<style>
.uni-flex{
	display: flex;
	justify-content: flex-start;
}
.topic-bg{
	width: 100%;
	height: 300upx;
	position: relative;
	overflow: hidden;
}
.topic-bg>image{
	width: 100%;
	position: absolute;
	filter: blur(10px);
}
.topic-info{
	padding: 0 3%;
}
.topic-info-t{
	position: relative;
}
.topic-info-t>image{
	width: 150upx;
	height: 150upx;
	border-radius: 20upx;
	position: absolute;
	top:-75upx;
}
.topic-info-t>view{
	font-size: 35upx;
	margin-left: 170upx;
	flex: 1;
}
.topic-info-c{
	padding: 35upx 0 15upx 0;
}
.topic-info-c >view{
	color: #CDCDCD;
}
.topic-info-b{
	color: #A3A3A3;
	font-size: 32upx;
	padding-bottom: 10upx;
}
/* 默认 */
.abc{
	padding: 3%;
}
.common-list{
	display: flex;
	width: 100%;
}

.common-list-l{
	flex-shrink: 0;
}
.common-list-l image{
	width: 90upx;
	height: 90upx;
	border-radius: 100%;
}
.common-list-r>view:nth-child(3)>image{
	width: 100%;
	border-radius: 10upx;
}
.common-list-r{
	flex: 1;
	margin-left: 15upx;
	border-bottom: 1upx solid #EEEEEE;
	padding-bottom: 10upx;
}
.common-list-r>view:nth-child(1)>view:first-child{
	color: #999999;
	font-size: 32upx;
}
.tag-sex{
	background: #007AFF;
	color: #FFFFFF;
	font-size: 28upx;
	padding: 5upx 10upx;
	margin-left: 10upx;
	border-radius: 20upx;
	
}
.common-list-r>view:nth-child(1)>view:last-child{
	background: #EEEEEE;
	padding: 0 10upx;
	font-size: 26upx;
}
.common-list-r>view:nth-child(2){
	font-size: 32upx;
	padding: 12upx 0;
}
.common-list-r>view:nth-child(3){
	position: relative;
	margin-bottom: 10upx;
}

.common-list-play{
	position: absolute;
	color: #FFFFFF;
	font-size: 120upx;
}
.common-list-playinfo{
	position: absolute;
	color: #FFFFFF;
	right: 10upx;
	bottom: 10upx;
	background:rgba(51,51,51,0.73);
	border-radius: 20upx;
	padding: 0 20upx;
	font-size: 26upx;
}

.common-list-share{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background: #EEEEEE;
	
	width: 100%;
	border-radius: 10upx;
	padding: 10upx;
}
.common-list-share>image{
	width: 200upx;
	height: 150upx;
	margin-right: 10upx;
}


.common-list-r>view:nth-child(4)>view{
	color: #AAAAAA;
}
.common-list-r>view:nth-child(4)>view:nth-child(2)>view{
	margin-left: 10upx;
	padding-left: 5upx;
}

.list-one{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.list-four{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.font{
	font-size: 32upx !important;
}

</style>
